<?php
use Core\Helper\ApplicationDirectoryHelper;

$allTemplate = $this->allTemplates;
?>

<div class="ad_title_ctn">
    <h2>Quản lý trang</h2>
</div>

<div class="ad_content_ctn">
    <div class="page_critetia_ctn">
        <div class="left" style="width:300px">
            <span>Module:</span>
            <select id="cboModule">
                <option value="ALL">All</option>
                <?php
                $allModules = ApplicationDirectoryHelper::getAllModule();
                foreach ($allModules as $aModule) {
                    echo '  <option value="'.$aModule.'">'.$aModule.'</option>';
                }

                ?>
            </select>
        </div>
        <div class="left" style="width:300px">
            <span>Controller:</span>
            <select id="cboController">
            </select>
        </div>

        <div class="left" style="width:400px">
            <span>Template:</span>
            <select id="cboTemplate">
                <option value="ALL">All</option>
                <?php

                foreach ($allTemplate as $aTemplate) {
                    echo '  <option value="'.$aTemplate->id.'">'.$aTemplate->name.'</option>';
                }

                ?>
            </select>
        </div>

        <div class="clear"></div>
        <div style="margin: 10px 0px">
            <span>Tên trang: </span>
            <input class="k-textbox" style="width: 300px" id="txtName" >
        </div>

    </div>
    <div class="page_search_ctr">
        <a id="btnSearch"  class="k-button k-button-icontext">Tìm kiếm</a>
    </div>
    <div id="page_grid"></div>
</div>

<script type="text/x-kendo-template" id="template">
    <div class="toolbar">
        <a class="k-button k-button-icontext  k-grid-edit"
           href="/admin/page/add">
            <span class="k-icon k-add"></span>Tạo mới
        </a>
    </div>
</script>

<script type="text/javascript">
    $(document).ready(function() {
        $(".page_critetia_ctn").keyup( function(event) {
            if ( event.which == 13 ) {
                event.preventDefault();
                doSearch();
            }
        });

        $("#cboModule").kendoComboBox({
            filter: "contains",
            suggest: true,
            index: 3,
            change: function(e) {
                loadController();
            }
        });

        var cboModule = $("#cboModule").data("kendoComboBox");
        $("#cboController").kendoComboBox();
        var cboController = $("#cboController").data("kendoComboBox");

        $("#cboTemplate").kendoComboBox();
        var cboTemplate = $("#cboTemplate").data("kendoComboBox");

        function loadController(){
            selectedModule = cboModule.value();
            $.post('/admin/common/get-controller-by-module',{mymodule:selectedModule}
                    ,function(result){
                        if (result.success){
                            data = result.data;
                            cboController.setDataSource(data)
                            cboController.text("");

                        }else{
                            alert(result.msg)
                        }

                    },'json');
        }


        dataSource = new kendo.data.DataSource({
            type: "jsonp",
            transport: {

                read: function(options) {
                    options.data.name=$('#txtName').val();
                    options.data.mymodule=cboModule.value();
                    options.data.mycontroller=cboController.value();
                    options.data.mytemplate=cboTemplate.value();
                    $.ajax( {
                        url: "<?php echo '/admin/page/list'  ?>",
                        data: options.data, // the "data" field contains paging, sorting, filtering and grouping data
                        success: function(result) {
                            if(result.success){
                                options.success(result);
                                $('#error_ctn').html('');
                            }else{
                                $('#error_ctn').html(result.msg);
                                grid = $("#page_grid").data("kendoGrid");
                                // cancel changes
                                grid.cancelChanges();
                            }
                        },
                        dataType: "json",
                        type: "POST"

                    });
                },



                destroy: function(options) {
                    $.ajax( {
                        url: "/admin/page/remove?id="+options.data.id,
                        data: options.data,
                        success: function(result) {
                            if(result.success){
                                options.success(options.data.models);
                                $('#error_ctn').addClass('blue_text').html('Xóa thành công.');
                            }else{
                                $('#error_ctn').html(result.msg);
                                grid = $("#page_grid").removeClass('blue_text').data("kendoGrid");
                                // cancel changes
                                grid.cancelChanges();
                            }


                        },
                        dataType: "json",
                        type: "POST"

                    });
                }
            },
            schema: {
                model: {
                    id: "id",
                    fields: {
                        id: {editable: false,  type: "number" },
                        name: { type: "string" },
                        module: { type: "string" },
                        controller: { type: "string" },
                        action: { type: "string" },
                        template_id: { type: "string" },
                        template: { type: "string" },
                        route: { type: "string" },
                        active: { type: "number" },
                        is_publish_for_all: { type: "number" },
                        created_date: { type: "date" }
                    }
                },
                data: "rows",
                total: "total"
            },
//                    batch: true,
            pageSize: 30,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true
        });

        $("#page_grid").kendoGrid({
            dataSource: dataSource,
            navigatable: true,
            pageable: true,

            columnMenu: true,
            sortable: true,
            resizable:true,
            toolbar:kendo.template($("#template").html()),

            columns: [
                { field: "name", title: "Tên", width: 100, template:" <a href='<?php echo '/admin/page/edit?id='  ?>#= id #'>#= name #</a> " },
                { field: "route", title: "Url", width: 120 },
                { field: "template", title: "template", width: 120 },
                { field: "module", title: "M/C/A", width: 120,template:"#= module #/#= controller #/#= action # "  },
                { field: "active", title: "Active", width: 40,
                    template: "<input onclick='doActive(this, \"#= id#\")'  disabled type='checkbox' data-bind='checked: 1' #= active ? checked='checked' : '' #/>"},
                { field: "is_publish_for_all", title: "For all", width: 40,
                    template: "<input  disabled type='checkbox' data-bind='checked: 1' #= is_publish_for_all ? checked='checked' : '' #/>"},
                { command:  [{name: "destroy", text: ""}],  title: "&nbsp;", width: 40 }

            ],
            editable: "inline"
        });


        function doSearch(){
            grid = $("#page_grid").data("kendoGrid");
            grid.dataSource.page(1);
            grid.dataSource.read();
        }

        $('#btnSearch').click(function(){
            doSearch();
        })
    });

    function doActive(me, pageId){
//        alert($(me).is(':checked'));
    }
</script>